import React, { Component } from 'react';
import "../styles/Index/News.scss"

class News extends Component {
    constructor(props){
        super(props);
        this.state = {
            noticeList:[
                {pic:'https://img.tukuppt.com/png_preview/00/52/43/lEZqPSOK0f.jpg%21/fw/780',name:'账户通知'},
                {pic:'https://pic.616pic.com/ys_bnew_img/00/06/53/XiOhoE17Zt.jpg',name:'物流通知'},
                {pic:'https://img1.baidu.com/it/u=586225892,126373039&fm=253&fmt=auto&app=138&f=JPEG?w=525&h=500',name:'优惠促销'},
                {pic:'https://img95.699pic.com/element/40027/8279.png_860.png',name:'服务通知'},
            ],
            shopList:[
                {
                    name:'小米官方旗舰店',
                    pic:'https://p7.itc.cn/q_70/images03/20210816/55b56b5fddb44989bd8d7e4e5ec8aa7c.jpeg',
                    date:'星期三',
                    value:'是的呢'
                },
                {
                    name:'小米官方旗舰店',
                    pic:'https://p7.itc.cn/q_70/images03/20210816/55b56b5fddb44989bd8d7e4e5ec8aa7c.jpeg',
                    date:'星期三',
                    value:'是的呢'
                },
                {
                    name:'小米官方旗舰店',
                    pic:'https://p7.itc.cn/q_70/images03/20210816/55b56b5fddb44989bd8d7e4e5ec8aa7c.jpeg',
                    date:'星期三',
                    value:'是的呢'
                },
                {
                    name:'小米官方旗舰店',
                    pic:'https://p7.itc.cn/q_70/images03/20210816/55b56b5fddb44989bd8d7e4e5ec8aa7c.jpeg',
                    date:'星期三',
                    value:'是的呢'
                },
                {
                    name:'小米官方旗舰店',
                    pic:'https://p7.itc.cn/q_70/images03/20210816/55b56b5fddb44989bd8d7e4e5ec8aa7c.jpeg',
                    date:'星期三',
                    value:'是的呢'
                },
            ]
        }
    }
    render() {
        return (
            <div className='news'>
                <div className="title">消息</div>
                <div className="notice">
                    {
                        this.state.noticeList.map((item,index)=>{
                            return (
                                <div className="item" key={index}>
                                    <div className="pic">
                                        <img src={item.pic} alt="" />
                                    </div>
                                    <div className="name">{item.name}</div>
                                </div>
                            )
                        })
                    }
                </div>
                <div className="shop">
                    {
                        this.state.shopList.map((item,index)=>{
                            return (
                                <div className="item" key={index}>
                                    <div className="pic"><img src={item.pic} alt="" /></div>
                                    <div className="infro">
                                        <div className="left">
                                            <div className="name">{item.name}</div>
                                            <div className="value">{item.value}</div>
                                        </div>
                                        <div className="right">{item.date}</div>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
                <div className="nomore">没有更多对话记录了</div>
            </div>
        );
    }
}

export default News;